/**
 * by eval .
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button,Image,TouchableOpacity,TextInput,SectionList} from 'react-native';
import { scaleSize } from '../../utils/screen';
import FontText,{fontFamily} from '../components/FontText';
import {i18n} from '../../i18n/index';
import RadioGroup from '../components/Radio/index'
import {Row} from '../components/TableRow';
const testData = {
  time:"AM 09:11",
  order:"OF001",
  employee:i18n.t("store.order.employee"),
  customer:"-",
  total:"$100",
  orderType:"Take Out"
}
import {TabView} from 'react-native-tab-view';

import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as orderActions from './actions/orderActions';
import { Picker,ActivityIndicator as AntActivityIndicator} from 'antd-mobile-rn';

class Order extends Component {
  constructor(props){
    super(props);
    this.state = {
      keyword:"",
      index:0,
      routes:[{
        key:"open"
      },{
        key:"close"
      }]
    }
  }
  componentDidMount(){
    this.props.loadOrders();
  }
  render() {
    let {keyword,index} = this.state;
    let {loading} = this.props.order;
    return (
      <View style={styles.container}>
        <TabView 
          navigationState = {this.state}
          onIndexChange={(e)=>this.onIndexChange(e)}
          useNativeDriver = {true}
          renderScene = {(e)=>this.renderScene(e)} 
          renderTabBar = {({jumpTo})=>{
            return (
              <View style = {styles.searchBox}>
                <View style = {styles.searchView}>
                  <Image style = {{width:scaleSize(26),height:scaleSize(26)}} source = {require("../../access/imgs/search_icon.png")}/>
                  <TextInput 
                      placeholder = {i18n.t("store.table.search")}
                      numberOfLines = {1}
                      onChangeText = {(val)=>this.valuChange(val,"keyword")}
                      style = {styles.inputStyle}
                      value = {keyword}
                      returnKeyType = {"search"}
                      underlineColorAndroid = {'transparent'}
                      placeholderTextColor = {'#5f5f5f'}
                  />
                </View>
                <View style = {styles.typeView}>
                  <RadioGroup selectIndex = {index} onChange = {(index)=>this.onRadioChange(index)} radios = {[i18n.t("store.order.open"),i18n.t("store.order.close")]} />
                </View>
                <View style = {styles.fillterView}>
                  <TouchableOpacity
                    activeOpacity = {0.8}
                    style = {styles.fillterBox}
                    onPress = {()=>this.onFillerPress()}
                    >
                    <Image style = {styles.fillterIcon} source = {require("../../access/imgs/oder_filter_icon.png")} />
                  </TouchableOpacity>
                </View>
              </View>
            )
          }}
        />
        <AntActivityIndicator 
          toast
          text={i18n.t("tips.loading")}
          animating={loading}
        />
      </View>
    );
  }
  renderOderItem(item, index, section){
    return (
      <View style = {styles.orderItem}>
        <Row dataKeys = {["date_added","server_order_id","user_id","user_id","total","take_option"]} data = {item}  onPress = {()=>this.onTableRowPress(item)} />
      </View>
    )
  }
  onTableRowPress(item){
    console.log(item)
  }
  onIndexChange(index){
    let {loadOrders,order} = this.props;
    if(index == 1 && order.closeOrders.length == 0){
      loadOrders(0);
    }
    this.setState({
      index:index
    })
  }
  valuChange(val,key){
    this.setState({
      [key]:val
    })
  }
  onFillerPress(){

  }
  onRadioChange(index){
    let {loadOrders,order} = this.props;
    if(index == 1 && order.closeOrders.length == 0){
      loadOrders(0);
    }
    this.setState({
      index:index
    })
  }
  renderScene(e){
    let {key} = e.route;
    let {order} = this.props;
    switch (key) {
      case "open":
        return (
          <View style = {styles.senceView}>
            <View style = {styles.tableHard}>
                <Row fontstyle = {{color:"#fd265d"}} data = {{
                  time:i18n.t("store.order.time"),
                  order:i18n.t("store.order.order"),
                  employee:i18n.t("store.order.employee"),
                  customer:i18n.t("store.order.customer"),
                  total:i18n.t("store.order.total"),
                  orderType:i18n.t("store.order.orderType")
                }}></Row>
              </View>
              <View style = {styles.orderList}>
                <SectionList
                  renderItem={({ item, index, section }) => this.renderOderItem(item, index, section)}
                  renderSectionHeader={({ section: { title } }) => (
                    <View style = {styles.orderItemTitle}>
                      <FontText font = {'book'} style = {styles.titleText}>{title}</FontText>
                    </View>
                  )}
                  sections={order.openOrders}
                  keyExtractor={(item, index) => item + index}
                  onEndReached = {()=>this.reloadOrder(1)}
                  shouldItemUpdate = {()=>false}
                />
            </View>
          </View>
        )
      break;
      case "close":
        return (
          <View style = {styles.senceView}>
            <View style = {styles.tableHard}>
                <Row 
                  fontstyle = {{color:"#fd265d"}} 
                  data = {{
                  time:i18n.t("store.order.time"),
                  order:i18n.t("store.order.order"),
                  employee:i18n.t("store.order.employee"),
                  customer:i18n.t("store.order.customer"),
                  total:i18n.t("store.order.total"),
                  orderType:i18n.t("store.order.orderType")
                  }} />
              </View>
              <View style = {styles.orderList}>
                <SectionList
                  renderItem={({ item, index, section }) => this.renderOderItem(item, index, section)}
                  renderSectionHeader={({ section: { title } }) => (
                    <View style = {styles.orderItemTitle}>
                      <FontText font = {'book'} style = {styles.titleText}>{title}</FontText>
                    </View>
                  )}
                  sections={order.closeOrders}
                  keyExtractor={(item, index) => item + index}
                  onEndReached = {()=>this.reloadOrder(0)}
                  shouldItemUpdate = {()=>false}
                />
            </View>
          </View>
        )
      break;
      default:
        break;
    }
  }
  reloadOrder(status){
    let {loadOrders} = this.props;
    loadOrders(status);
  }
}

export default connect(
  state => ({
    order: state.order
  }),
  dispatch => bindActionCreators(orderActions, dispatch)
)(Order);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  searchBox:{
    height:scaleSize(100),
    paddingHorizontal: scaleSize(30),
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: "#090d17",
    justifyContent: 'space-between',
  },
  searchView:{
    flexDirection: 'row',
    width:scaleSize(360),
    borderBottomWidth: 1,
    borderBottomColor: "#5f5f5f",
    height:scaleSize(60),
    alignItems: 'center'
  },
  inputStyle:{
    fontFamily: fontFamily.book,
    fontSize: scaleSize(27),
    paddingLeft: scaleSize(18),
    color:"#5f5f5f",
  },
  fillterView:{
    width:scaleSize(360),
    justifyContent:"center",
    alignItems: 'flex-end',
  },
  fillterBox:{
    paddingLeft: scaleSize(30),
  },
  fillterIcon:{
    width:scaleSize(31),
    height:scaleSize(27)
  },
  tableHard:{
    backgroundColor: "#090d17",
    height:scaleSize(70),
    paddingHorizontal: scaleSize(30),
  },
  orderList:{
    flex:1,
    backgroundColor: "#151c2e",
  },
  orderItemTitle:{
    paddingHorizontal: scaleSize(30),
    height:scaleSize(50),
    justifyContent: 'center',
    backgroundColor: "#232b40",
  },
  orderItem:{
    height:scaleSize(100),
    paddingHorizontal: scaleSize(30),
  },
  titleText:{
    fontSize: scaleSize(24),
    color:"#fff"
  },
  senceView:{
    flex:1
  }
});
